/**
 * @description 注册页面
 * @author xiaofujun
*/

import React, { useEffect } from 'react';
import { Button, useColorMode, InputGroup, Input, InputLeftElement, Stack, Flex, Text, Link, Box } from '@chakra-ui/react';
import { MdPhoneIphone, MdPerson, MdLock } from 'react-icons/md'; 
import { RiWechatFill, RiQqFill } from 'react-icons/ri';

function RegistryPage() {
  const {colorMode, toggleColorMode} = useColorMode();

  return (
    <Box w="300px">
      <form>
        <Stack 
          border="1px" 
          borderColor="blackAlpha.300" 
          borderRadius="sm" 
          bgColor="rgba(181, 181, 181, 0.1)"
          pt="2" 
          mb={5}
        >
          <InputGroup>
            <InputLeftElement 
              pointerEvents={'none'}  
              children={<MdPerson size='24' color='#969696' />}
            />
            <Input borderColor='blackAlpha.300' _focus={false} fontSize={'sm'} variant={'flushed'} focusBorderColor={'gray.200'} placeholder="你的昵称" />
          </InputGroup>
          <InputGroup>
            <InputLeftElement 
              pointerEvents={'none'}  
              children={<MdPhoneIphone size='22' color='#969696' />}
            />
            <Input borderColor='blackAlpha.300' _focus={false} fontSize={'sm'} variant={'flushed'} focusBorderColor={'gray.200'} placeholder="手机号" />
          </InputGroup>
          <InputGroup h="40px">
            <InputLeftElement 
              pointerEvents={'none'}  
              children={<MdLock size='22' color='#969696' />}
            />
            <Input fontSize={'sm'} variant={'unstyled'} type='password' focusBorderColor={'gray.200'} placeholder="设置密码" />
          </InputGroup>
        </Stack>

        <Button 
          _active={false} 
          _focus={false} 
          _hover={{bgColor: '#3db922'}} 
          w={'100%'}
          borderRadius='25px'
          bgColor='rgb(66, 192, 46)'
          color='white' 
          fontSize='lg' 
          fontWeight='medium'
        >注册</Button>

        <Text my={2.5} fontSize="xs" color='#969696' align='center'>
          点击 “注册” 即表示您同意并愿意遵守简书<br />
          <Link _hover={false} _focus={false} target="_blank" color='#3194d0' href='https://www.jianshu.com/p/c44d171298ce'>用户协议</Link> 
          &nbsp;和&nbsp; 
          <Link _hover={false} _focus={false} target="_blank" color='#3194d0' href='https://www.jianshu.com/p/2ov8x3'>隐私政策</Link> 
          &nbsp;。
        </Text>
      </form>
      <Stack mt={12} align="center">
        <Text 
          align="left"
          mb={2.5} 
          pos='relative'
          align="center" 
          color='#969696' 
          fontSize="xs"
          _before={{
            content: "' '",
            borderTop: '1px',
            display: 'block',
            width: '60px',
            position: 'absolute',
            top: '10px',
            marginLeft: '-70px',
          }}
          _after={{
            content: "' '",
            borderTop: '1px',
            display: 'block',
            width: '60px',
            position: 'absolute',
            top: '10px',
            right: '-70px',
          }}
        >社交帐号直接注册</Text>
        <Stack direction="horization">
          <Box w='50px' h='50px' align='center'>
            <Link _hover={false} _focus={false} target="_blank" href='https://open.weixin.qq.com/connect/qrconnect?appid=wxe9199d568fe57fdd&client_id=wxe9199d568fe57fdd&redirect_uri=https%3A%2F%2Fwww.jianshu.com%2Fusers%2Fauth%2Fwechat%2Fcallback&response_type=code&scope=snsapi_login&state=%257B%257D#wechat_redirect'>
              <RiWechatFill cursor='pointer' size="28" color='#3db922' />
            </Link>
          </Box>
          <Box w='50px' h='50px' align='center'>
            <Link _hover={false} _focus={false} target="_blank" href='https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=100410602&redirect_uri=https%3A%2F%2Fwww.jianshu.com%2Fusers%2Fauth%2Fqq_connect%2Fcallback&response_type=code&state=%257B%257D'>
              <RiQqFill cursor='pointer' size="28" color='#498ad5' />
            </Link>
          </Box>
        </Stack>
      </Stack>
    </Box>
  );
}

export default RegistryPage;
